<template>
  <div class="mx-20 f1 df fdc">
    <div class="f1">
      <MapChart></MapChart>
    </div>
    <div class="echartsBox fn">
      <FirstHeader :title="'任务数量趋势'" :file="'home'" :icon="'icon-s-2'"></FirstHeader>
      <div class="echarts">
        <ECharts :option="option" :resize="false" />
      </div>
    </div>
  </div>
</template>

<script setup lang="ts" name="home">
import { onMounted, ref } from "vue";
import MapChart from "./MapChart.vue";
import FirstHeader from "@/components/FirstHeader/index.vue";
import ECharts from "@/components/ECharts/index.vue";
import { ECOption } from "@/components/ECharts/config";
import { taskQuantityTrend } from "@/api/modules/home";

onMounted(() => {
  getTaskQuantityTrend();
});
const getTaskQuantityTrend = async () => {
  let {
    data: { countList, nameList }
  } = await taskQuantityTrend();
  if (option.value.xAxis) option.value.xAxis[0].data = nameList.map(i => i + "月");
  option.value.series = [
    {
      name: "任务数",
      type: "bar",
      barMaxWidth: 16,
      itemStyle: {
        color: "#2498ff"
      },
      data: countList
    },
    {
      name: "价格",
      type: "line",
      lineStyle: {
        width: 2,
        color: "#FF9937"
      },
      symbolSize: 0,
      label: {
        show: true,
        lineHeight: 30,
        formatter: "{c}",
        position: "top",
        color: "#fff",
        fontSize: 13
      },
      data: countList
    }
  ];
};

const option = ref<ECOption>({
  grid: {
    borderWidth: 0,
    top: "14%",
    left: "8%",
    right: "2%",
    bottom: "25%"
  },
  xAxis: [
    {
      type: "category",
      axisLine: {
        show: false
      },
      splitLine: {
        show: false
      },
      axisTick: {
        show: false
      },
      splitArea: {
        show: false
      },
      axisLabel: {
        interval: 0,
        color: "#fff",
        fontSize: 13,

        margin: 13, //刻度标签与轴线之间的距离。
        // lineStyle: {
        width: 20
        // }
      }
    }
  ],
  yAxis: [
    {
      type: "value",
      splitLine: {
        show: false
      },
      axisLine: {
        show: false
      },
      axisTick: {
        show: false
      },
      axisLabel: {
        color: "#fff",
        fontSize: 13
      },
      splitArea: {
        show: false
      }
    }
  ]
});
</script>

<style scoped lang="scss">
.echartsBox {
  width: 100%;
  height: 300px;
  background: url("@/assets/images/home/thirdAidBg.png") no-repeat;
  background-size: 100% 100%;
  border: 1px solid #119edb;
  border-bottom: none;
}
.echarts {
  width: 100%;
  height: 90%;
}
</style>
